์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค๊ณ, ํ์ฅ์ฑ ๋ฐ ๊ธ๋ก๋ฒ ์ ๊ทผ์ฑ์ ์ค์ ์ ๋ ํ๋ก ํธ์๋ ๋์์ธ ์์คํ ์ํคํ ์ฒ๋ฅผ ์ดํด๋ด ๋๋ค. ๊ฐ๋ ฅํ๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ ์์คํ ๊ตฌ์ถ ๋ฐ ์ ์ง ๊ด๋ฆฌ์ ๋ํ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐฐ์๋๋ค.
ํ๋ก ํธ์๋ ๋์์ธ ์์คํ : ๊ธ๋ก๋ฒ ํ์ฅ์ฑ์ ์ํ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ํคํ ์ฒ
์ค๋๋ ๋น ๋ฅด๊ฒ ์งํํ๋ ๋์งํธ ํ๊ฒฝ์์ ๊ฐ๋ ฅํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ํ๋ก ํธ์๋๋ ๊ธ๋ก๋ฒ ์ง์ถ์ ๋ชฉํ๋ก ํ๋ ๋ชจ๋ ์กฐ์ง์ ํ์์ ์ ๋๋ค. ์ ์ค๊ณ๋ ํ๋ก ํธ์๋ ๋์์ธ ์์คํ , ํนํ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ผ๊ด๋ ์ฌ์ฉ์ ๊ฒฝํ, ํจ์จ์ ์ธ ๊ฐ๋ฐ ์ํฌํ๋ก ๋ฐ ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅํ ์ฝ๋๋ฒ ์ด์ค์ ๊ธฐ๋ฐ์ ํ์ฑํฉ๋๋ค. ์ด ๊ธ์์๋ ๋ค์ํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์์ฉํ๊ธฐ ์ํด ํ์ฅ์ฑ, ์ ๊ทผ์ฑ ๋ฐ ๊ตญ์ ํ๋ฅผ ๊ฐ์กฐํ๋ฉด์ ํ๋ก ํธ์๋ ๋์์ธ ์์คํ ๋ด์ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ํคํ ์ฒ์ ๋ณต์ก์ฑ์ ์ดํด๋ด ๋๋ค.
ํ๋ก ํธ์๋ ๋์์ธ ์์คํ ์ด๋ ๋ฌด์์ ๋๊น?
ํ๋ก ํธ์๋ ๋์์ธ ์์คํ ์ ํตํฉ๋ ์๊ฐ์ ์ธ์ด๋ฅผ ํ๋ฆฝํ๊ณ ๋ชจ๋ ๋์งํธ ์ ํ์์ ์ผ๊ด์ฑ์ ํฅ์์ํค๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ์ปดํฌ๋ํธ, ํจํด, ์ง์นจ ๋ฐ ๋ฌธ์์ ํฌ๊ด์ ์ธ ๋ชจ์์ ๋๋ค. ์กฐ์ง์ ๋ชจ๋ ํ๋ก ํธ์๋ ๊ด๋ จ ์ธก๋ฉด์ ๋ํ ๋จ์ผ ์์ค๋ผ๊ณ ์๊ฐํ์ญ์์ค.
ํ๋ก ํธ์๋ ๋์์ธ ์์คํ ๊ตฌํ์ ์ฃผ์ ์ด์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ํฅ์๋ ์ผ๊ด์ฑ: ๋ชจ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๊ท ์ผํ ๋ชจ์๊ณผ ๋๋์ ๋ณด์ฅํ์ฌ ๋ธ๋๋ ์ธ์ง๋๋ฅผ ๊ฐํํฉ๋๋ค.
- ํจ์จ์ฑ ํฅ์: ๊ฐ๋ฐ์๊ฐ ์ฆ์ ์ฌ์ฉํ ์ ์๋ ๋ฏธ๋ฆฌ ๋น๋๋๊ณ ํ ์คํธ๋ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํ์ฌ ๊ฐ๋ฐ ์๊ฐ์ ์ค์ ๋๋ค.
- ํฅ์๋ ํ์ : ์ค๊ณ์์ ๊ฐ๋ฐ์ ๊ฐ์ ๋ ๋์ ์ปค๋ฎค๋์ผ์ด์ ์ ์ด์งํ์ฌ ์ค๊ณ-๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ๊ฐ์ํํฉ๋๋ค.
- ์ ์ง ๊ด๋ฆฌ ๋น์ฉ ์ ๊ฐ: ์ค๊ณ ๋ฐ ์ฝ๋ ๋ณ๊ฒฝ์ ์ค์ ์ง์คํํ์ฌ ์ ๋ฐ์ดํธ ๋ฐ ์ ์ง ๊ด๋ฆฌ๋ฅผ ๊ฐ์ํํฉ๋๋ค.
- ํฅ์๋ ์ ๊ทผ์ฑ: ๋ชจ๋ ์ปดํฌ๋ํธ์ ์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ์ ํตํฉํ์ฌ ํฌ๊ด์ ์ธ ์ค๊ณ ๋ฐฉ์์ ์ฅ๋ คํฉ๋๋ค.
- ํ์ฅ์ฑ: ์๋ก์ด ๊ธฐ๋ฅ ๋ฐ ํ๋ซํผ์ ๋ํ ์์ฌ์ด ํ์ฅ ๋ฐ ์ ์์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
๋์์ธ ์์คํ ์ ํต์ฌ: ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ชจ๋ ํ๋ก ํธ์๋ ๋์์ธ ์์คํ ์ ํต์ฌ์ ๋๋ค. ๋ฒํผ ๋ฐ ์ ๋ ฅ๊ณผ ๊ฐ์ ๊ธฐ๋ณธ ๋น๋ฉ ๋ธ๋ก๋ถํฐ ํ์ ๋ชจ์ ๋ฐ ๋ฐ์ดํฐ ํ ์ด๋ธ๊ณผ ๊ฐ์ ๋ ๋ณต์กํ ์ปดํฌ๋ํธ์ ์ด๋ฅด๊ธฐ๊น์ง ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ์์์ ์ ์ฅ์์ ๋๋ค. ์ด๋ฌํ ์ปดํฌ๋ํธ๋ ๋ค์๊ณผ ๊ฐ์์ผ ํฉ๋๋ค.
- ์ฌ์ฌ์ฉ ๊ฐ๋ฅ: ์ฌ๋ฌ ํ๋ก์ ํธ ๋ฐ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉํ๋๋ก ์ค๊ณ๋์์ต๋๋ค.
- ๋ชจ๋์: ๋ ๋ฆฝ์ ์ด๊ณ ์์ฒด ํฌํจ๋์ด ์์คํ ์ ๋ค๋ฅธ ๋ถ๋ถ์ ๋ํ ์ข ์์ฑ์ ์ต์ํํฉ๋๋ค.
- ์ ๋ฌธ์ํ๋จ: ์ฌ์ฉ๋ฒ, ์์ฑ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ค๋ช ํ๋ ๋ช ํํ ๋ฌธ์์ ํจ๊ป ์ ๊ณต๋ฉ๋๋ค.
- ํ ์คํธ ๊ฐ๋ฅ: ๊ธฐ๋ฅ ๋ฐ ์์ ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ฒ ์ ํ ํ ์คํธ๋์์ต๋๋ค.
- ์ ๊ทผ ๊ฐ๋ฅ: WCAG ์ง์นจ์ ์ค์ํ์ฌ ์ ๊ทผ์ฑ์ ์ผ๋์ ๋๊ณ ๊ตฌ์ถ๋์์ต๋๋ค.
- ํ ๋ง ์ ์ฉ ๊ฐ๋ฅ: ๋ค์ํ ํ ๋ง ๋ฐ ๋ธ๋๋ฉ ์๊ตฌ ์ฌํญ์ ์ง์ํ๋๋ก ์ค๊ณ๋์์ต๋๋ค.
์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ํคํ ์ฒ: ์ฌ์ธต ๋ถ์
๊ฒฌ๊ณ ํ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ํคํ ์ฒ๋ฅผ ์ค๊ณํ๋ ค๋ฉด ์ ํํ ๊ธฐ์ ์คํ, ์กฐ์ง์ ํน์ ์๊ตฌ ์ฌํญ ๋ฐ ๋์ ์ฌ์ฉ์๋ฅผ ํฌํจํ ์ฌ๋ฌ ์์๋ฅผ ์ ์คํ๊ฒ ๊ณ ๋ คํด์ผ ํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ฃผ์ ์ํคํ ์ฒ ๊ณ ๋ ค ์ฌํญ์ ๋๋ค.
1. Atomic Design ๋ฐฉ๋ฒ๋ก
Brad Frost๊ฐ ๋์คํํ Atomic Design์ ์ธํฐํ์ด์ค๋ฅผ ์์์ ๊ฐ์ด ๊ธฐ๋ณธ์ ์ธ ๋น๋ฉ ๋ธ๋ก์ผ๋ก ๋ถํดํ์ฌ ๋์์ธ ์์คํ ์ ๋ง๋๋ ๋ฐฉ๋ฒ๋ก ์ ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ชจ๋์ฑ, ์ฌ์ฌ์ฉ์ฑ ๋ฐ ์ ์ง ๊ด๋ฆฌ์ฑ์ ํฅ์์ํต๋๋ค.
Atomic Design์ ๋ค์ฏ ๊ฐ์ง ๊ณ ์ ํ ๋จ๊ณ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ์์: ๋ฒํผ, ์ ๋ ฅ, ๋ ์ด๋ธ ๋ฐ ์์ด์ฝ๊ณผ ๊ฐ์ด ๊ฐ์ฅ ์๊ณ ๋๋ ์ ์๋ UI ์์์ ๋๋ค.
- ๋ถ์: ๊ฒ์ ์ฐฝ(์ ๋ ฅ + ๋ฒํผ)๊ณผ ๊ฐ์ด ํน์ ๊ธฐ๋ฅ์ ์ํํ๋ ์์์ ์กฐํฉ์ ๋๋ค.
- ์ ๊ธฐ์ฒด: ํค๋(๋ก๊ณ + ํ์ + ๊ฒ์ ์ฐฝ)์ ๊ฐ์ด ์ธํฐํ์ด์ค์ ๊ณ ์ ํ ์น์ ์ ํ์ฑํ๋ ๋ถ์ ๊ทธ๋ฃน์ ๋๋ค.
- ํ ํ๋ฆฟ: ๊ตฌ์กฐ ๋ฐ ์ฝํ ์ธ ์๋ฆฌ ํ์์๋ฅผ ์ ์ํ๋ ํ์ด์ง ์์ค ๋ ์ด์์์ ๋๋ค.
- ํ์ด์ง: ์ค์ ์ฝํ ์ธ ๊ฐ ํฌํจ๋ ํ ํ๋ฆฟ์ ํน์ ์ธ์คํด์ค๋ก, ์ต์ข ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฌ์ค๋๋ค.
์์๋ถํฐ ์์ํ์ฌ ์ ์ฐจ์ ์ผ๋ก ํ์ด์ง๋ฅผ ๋น๋ํ๋ฉด ์ผ๊ด์ฑ ๋ฐ ์ฌ์ฌ์ฉ์ฑ์ ํฅ์์ํค๋ ๊ณ์ธต์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ญ๋๋ค. ์ด ๋ชจ๋์ ์ ๊ทผ ๋ฐฉ์์ ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ๋์์ธ ์์คํ ์ ๋ ์ฝ๊ฒ ์ ๋ฐ์ดํธํ๊ณ ์ ์ง ๊ด๋ฆฌํ ์ ์๋๋ก ํฉ๋๋ค.
์: ๊ฐ๋จํ ํผ ์์๋ ๋ค์๊ณผ ๊ฐ์ด ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
- ์์: `Label`, `Input`
- ๋ถ์: `FormInput`(`Label` ๋ฐ `Input`์ ์ ํจ์ฑ ๊ฒ์ฌ ๋ก์ง๊ณผ ๊ฒฐํฉ)
- ์ ๊ธฐ์ฒด: `RegistrationForm`(์ ์ถ ๋ฒํผ๊ณผ ํจ๊ป ์ฌ๋ฌ `FormInput` ๋ถ์ ๊ทธ๋ฃนํ)
2. ์ปดํฌ๋ํธ ๊ตฌ์กฐ ๋ฐ ๊ตฌ์ฑ
์ ๊ตฌ์ฑ๋ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ตฌ์กฐ๋ ๊ฒ์ ๊ฐ๋ฅ์ฑ ๋ฐ ์ ์ง ๊ด๋ฆฌ์ฑ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ค์ ์์น์ ๊ณ ๋ คํ์ญ์์ค.
- ๋ฒ์ฃผํ: ๊ธฐ๋ฅ ๋๋ ๋ชฉ์ ์ ๋ฐ๋ผ ์ปดํฌ๋ํธ๋ฅผ ๊ทธ๋ฃนํํฉ๋๋ค(์: `Forms`, `Navigation`, `Data Display`).
- ๋ช ๋ช ๊ท์น: ์ปดํฌ๋ํธ ๋ฐ ํด๋น ์์ฑ์ ๋ํด ์ผ๊ด๋๊ณ ์ค๋ช ์ ์ธ ๋ช ๋ช ๊ท์น์ ์ฌ์ฉํฉ๋๋ค(์: `Button`, `Button--primary`, `Button--secondary`).
- ๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ: ์ปดํฌ๋ํธ๋ฅผ ๋ช ํํ๊ณ ๋ ผ๋ฆฌ์ ์ธ ๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ๋ก ๊ตฌ์ฑํฉ๋๋ค(์: `/components/Button/Button.js`, `/components/Button/Button.css`, `/components/Button/Button.stories.js`).
- ๋ฌธ์ํ: ์ฌ์ฉ ์์ , ์์ฑ ์ค๋ช ๋ฐ ์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ์ ํฌํจํ์ฌ ๊ฐ ์ปดํฌ๋ํธ์ ๋ํ ํฌ๊ด์ ์ธ ๋ฌธ์๋ฅผ ์ ๊ณตํฉ๋๋ค.
์์ ๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ:
/components
/Button
Button.js
Button.css
Button.stories.js
Button.mdx (Documentation)
/Input
Input.js
Input.css
Input.stories.js
Input.mdx (Documentation)
/Navigation
Navigation.js
Navigation.css
Navigation.stories.js
Navigation.mdx (Documentation)
3. ๊ธฐ์ ์คํ ๊ณ ๋ ค ์ฌํญ
๊ธฐ์ ์คํ์ ์ ํ์ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ํคํ ์ฒ์ ํฐ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ์ธ๊ธฐ ์๋ ์ต์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- React: ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์ํคํ ์ฒ ๋ฐ ๊ฐ์ DOM์ผ๋ก ์ ๋ช ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ํ ๋๋ฆฌ ์ฌ์ฉ๋๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- Angular: ์ข ์์ฑ ์ฃผ์ ๋ฐ TypeScript ์ง์๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์ ์ํ ํฌ๊ด์ ์ธ ํ๋ ์์ํฌ์ ๋๋ค.
- Vue.js: ๋ฐฐ์ฐ๊ณ ํตํฉํ๊ธฐ ์ฌ์ด ํ๋ก๊ทธ๋ ์๋ธ ํ๋ ์์ํฌ๋ก, UI ์ปดํฌ๋ํธ ๊ตฌ์ถ์ ์ํ ์ ์ฐํ๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์๋ฃจ์ ์ ์ ๊ณตํฉ๋๋ค.
- Web Components: ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ฌ์ฉ์ ์ ์ HTML ์์๋ฅผ ๋ง๋ค ์ ์๋ ์น ํ์ค ์ธํธ์ ๋๋ค. ์ด๋ JavaScript ํ๋ ์์ํฌ์ ํจ๊ป ์ฌ์ฉํ๊ฑฐ๋ ํ๋ ์์ํฌ ์์ด๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๊ธฐ์ ์คํ์ ์ ํํ ๋๋ ํ ์ ๋ฌธ ์ง์, ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ ๋ฐ ์ฅ๊ธฐ์ ์ธ ์ ์ง ๊ด๋ฆฌ์ฑ๊ณผ ๊ฐ์ ์์๋ฅผ ๊ณ ๋ คํ์ญ์์ค. React, Angular ๋ฐ Vue.js์ ๊ฐ์ ํ๋ ์์ํฌ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ์์ ์์ฑ ํ๋ก์ธ์ค๋ฅผ ๊ฐ์ํํ๋ ๊ธฐ๋ณธ ์ ๊ณต ์ปดํฌ๋ํธ ๋ชจ๋ธ์ ์ ๊ณตํฉ๋๋ค. Web Components๋ ํ๋ ์์ํฌ์ ๊ตฌ์ ๋ฐ์ง ์๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ์ฌ ๋ค์ํ ํ๋ก์ ํธ ๋ฐ ๊ธฐ์ ์์ ์ฌ์ฉํ ์ ์๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์๋๋ก ํฉ๋๋ค.
4. ๋์์ธ ํ ํฐ
๋์์ธ ํ ํฐ์ ๋์์ธ ์์คํ ์ ์๊ฐ์ DNA๋ฅผ ๋ํ๋ด๋ ํ๋ซํผ์ ๊ตฌ์ ๋ฐ์ง ์๋ ๊ฐ์ ๋๋ค. ์์, ํ์ดํฌ๊ทธ๋ํผ, ๊ฐ๊ฒฉ ๋ฐ ์ค๋จ์ ๊ณผ ๊ฐ์ ๋์์ธ ๊ฒฐ์ ์ ์บก์ํํฉ๋๋ค. ๋์์ธ ํ ํฐ์ ์ฌ์ฉํ๋ฉด ์ด๋ฌํ ๊ฐ์ ์ค์์์ ๊ด๋ฆฌํ๊ณ ์ ๋ฐ์ดํธํ์ฌ ๋ชจ๋ ์ปดํฌ๋ํธ ๋ฐ ํ๋ซํผ์์ ์ผ๊ด์ฑ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
๋์์ธ ํ ํฐ ์ฌ์ฉ์ ์ด์ :
- ์ค์ ์ง์ค์ ๊ด๋ฆฌ: ๋์์ธ ๊ฐ์ ๋ํ ๋จ์ผ ์์ค๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ํ ๋ง ๊ธฐ๋ฅ: ๋ค๋ฅธ ํ ๋ง ๊ฐ์ ์ฌ์ด ์ ํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ํฌ๋ก์ค ํ๋ซํผ ์ผ๊ด์ฑ: ์น, ๋ชจ๋ฐ์ผ ๋ฐ ๊ธฐํ ํ๋ซํผ์์ ์ผ๊ด๋ ์คํ์ผ ์ง์ ์ ๋ณด์ฅํฉ๋๋ค.
- ํฅ์๋ ์ ์ง ๊ด๋ฆฌ์ฑ: ๋์์ธ ๊ฐ์ ๋ํ ์ ๋ฐ์ดํธ ๋ฐ ์์ ์ ๊ฐ์ํํฉ๋๋ค.
์์ ๋์์ธ ํ ํฐ(JSON):
{
"color": {
"primary": "#007bff",
"secondary": "#6c757d",
"success": "#28a745",
"error": "#dc3545"
},
"font": {
"family": "Roboto, sans-serif",
"size": {
"base": "16px",
"h1": "32px",
"h2": "24px"
}
},
"spacing": {
"small": "8px",
"medium": "16px",
"large": "24px"
}
}
์ด๋ฌํ ํ ํฐ์ CSS ๋๋ JavaScript ์ฝ๋ ๋ด์์ ์ฐธ์กฐํ์ฌ ์ปดํฌ๋ํธ์ ์คํ์ผ์ ์ผ๊ด๋๊ฒ ์ง์ ํ ์ ์์ต๋๋ค. Style Dictionary์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ํ ํ๋ซํผ ๋ฐ ํ์์ ๋ํ ๋์์ธ ํ ํฐ ์์ฑ ํ๋ก์ธ์ค๋ฅผ ์๋ํํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
5. ํ ๋ง ๋ฐ ์ฌ์ฉ์ ์ ์
๊ฒฌ๊ณ ํ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ ๋ง๋ฅผ ์ง์ํ์ฌ ๋ค์ํ ๋ธ๋๋ ๋๋ ์ปจํ ์คํธ์ ๋ง๊ฒ ๋ค์ํ ์๊ฐ์ ์คํ์ผ ๊ฐ์ ์ฝ๊ฒ ์ ํํ ์ ์๋๋ก ํด์ผ ํฉ๋๋ค. ์ด๋ CSS ๋ณ์, ๋์์ธ ํ ํฐ ๋๋ ํ ๋ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌ์ฑํ ์ ์์ต๋๋ค.
๋ค์์ ์ ๊ณตํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ๋ฏธ๋ฆฌ ์ ์๋ ํ ๋ง: ์ฌ์ฉ์๊ฐ ์ ํํ ์ ์๋ ๋ฏธ๋ฆฌ ๋น๋๋ ํ ๋ง ์ธํธ(์: ๋ฐ์, ์ด๋์, ๊ณ ๋๋น)๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์ฌ์ฉ์ ์ ์ ์ต์ : ์ฌ์ฉ์๊ฐ props ๋๋ CSS ์ฌ์ ์๋ฅผ ํตํด ๊ฐ๋ณ ์ปดํฌ๋ํธ ์คํ์ผ์ ์ฌ์ฉ์ ์ ์ํ ์ ์๋๋ก ํฉ๋๋ค.
- ์ ๊ทผ์ฑ ์ค์ฌ ํ ๋ง: ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ์ํ ๊ณ ๋๋น ํ ๋ง์ ๊ฐ์ด ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ์ํด ํน๋ณํ ์ค๊ณ๋ ํ ๋ง๋ฅผ ์ ๊ณตํฉ๋๋ค.
์: ํ ๋ง์ CSS ๋ณ์ ์ฌ์ฉ:
/* Default Theme */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #fff;
--text-color: #333;
}
/* Dark Theme */
.dark-theme {
--primary-color: #00bfff;
--secondary-color: #99a3a4;
--background-color: #333;
--text-color: #fff;
}
.button {
background-color: var(--primary-color);
color: var(--text-color);
}
CSS ๋ณ์๋ฅผ ์ ์ํ๋ฉด ๋ณ์ ๊ฐ์ ๋ณ๊ฒฝํ์ฌ ํ ๋ง ๊ฐ์ ์ฝ๊ฒ ์ ํํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ค์ํ ์๊ฐ์ ์คํ์ผ์ ๊ด๋ฆฌํ๋ ์ ์ฐํ๊ณ ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
6. ์ ๊ทผ์ฑ(a11y) ๊ณ ๋ ค ์ฌํญ
์ ๊ทผ์ฑ์ ๋ชจ๋ ๋์์ธ ์์คํ ์ ์ค์ํ ์ธก๋ฉด์ผ๋ก, ์ฅ์ ๊ฐ ์๋ ์ฌ๋๋ค์ด ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ๋ณด์ฅํฉ๋๋ค. ๋ชจ๋ ์ปดํฌ๋ํธ๋ ํฌ๊ด์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํด WCAG(Web Content Accessibility Guidelines)๋ฅผ ์ค์ํด์ผ ํฉ๋๋ค.
์ฃผ์ ์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ:
- ์๋งจํฑ HTML: ์๋งจํฑ HTML ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ
์ธ ์ ๊ตฌ์กฐ์ ์๋ฏธ๋ฅผ ์ ๊ณตํฉ๋๋ค(์: `
`, ` - ARIA ์์ฑ: ARIA(Accessible Rich Internet Applications) ์์ฑ์ ์ฌ์ฉํ์ฌ ์ง์ ๊ธฐ์ ์ ์ถ๊ฐ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ํค๋ณด๋ ํ์: ๋ชจ๋ ์ปดํฌ๋ํธ๊ฐ ํค๋ณด๋๋ฅผ ์ฌ์ฉํ์ฌ ์์ ํ ํ์ํ ์ ์๋์ง ํ์ธํฉ๋๋ค.
- ์์ ๋๋น: ํ ์คํธ์ ๋ฐฐ๊ฒฝ์ ๊ฐ์ ์ถฉ๋ถํ ์์ ๋๋น๋ฅผ ์ ์งํฉ๋๋ค.
- ํ๋ฉด ํ๋ ๊ธฐ ํธํ์ฑ: ํ๋ฉด ํ๋ ๊ธฐ๋ก ์ปดํฌ๋ํธ๋ฅผ ํ ์คํธํ์ฌ ์ฌ๋ฐ๋ฅด๊ฒ ํด์๋๋์ง ํ์ธํฉ๋๋ค.
- ์ด์ ๊ด๋ฆฌ: ์ ์ ํ ์ด์ ๊ด๋ฆฌ๋ฅผ ๊ตฌํํ์ฌ ์ฌ์ฉ์๋ฅผ ์ธํฐํ์ด์ค๋ก ์๋ดํฉ๋๋ค.
์: ์ ๊ทผ ๊ฐ๋ฅํ ๋ฒํผ ์ปดํฌ๋ํธ:
์ด ์์์๋ `aria-label`์ ์ฌ์ฉํ์ฌ ํ๋ฉด ํ๋ ๊ธฐ์ ๋ํ ํ ์คํธ ๋์์ ์ ๊ณตํ๊ณ , `aria-hidden`์ ์ฌ์ฉํ์ฌ SVG๋ฅผ ์ง์ ๊ธฐ์ ์์ ์จ๊ธฐ๊ณ (`aria-label`์ด ๊ด๋ จ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ฏ๋ก), `focusable="false"`๋ฅผ ์ฌ์ฉํ์ฌ SVG๊ฐ ์ด์ ์ ๋ฐ์ง ๋ชปํ๋๋ก ํฉ๋๋ค. ํญ์ ์ง์ ๊ธฐ์ ๋ก ์ปดํฌ๋ํธ๋ฅผ ํ ์คํธํ์ฌ ์ฌ๋ฐ๋ฅด๊ฒ ์ก์ธ์คํ ์ ์๋์ง ํ์ธํ์ญ์์ค.
7. ๊ตญ์ ํ(i18n) ๋ฐ ํ์งํ(l10n)
๊ธ๋ก๋ฒ ํ์ฅ์ฑ์ ์ํด ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๊ตญ์ ํ(i18n) ๋ฐ ํ์งํ(l10n)๋ฅผ ์ง์ํด์ผ ํฉ๋๋ค. ๊ตญ์ ํ๋ ์ฝ๋ ๋ณ๊ฒฝ ์์ด ๋ค์ํ ์ธ์ด์ ์ง์ญ์ ๋ง๊ฒ ์กฐ์ ํ ์ ์๋ ์ปดํฌ๋ํธ๋ฅผ ์ค๊ณํ๊ณ ๊ฐ๋ฐํ๋ ํ๋ก์ธ์ค์ ๋๋ค. ํ์งํ๋ ์ปดํฌ๋ํธ๋ฅผ ํน์ ์ธ์ด์ ์ง์ญ์ ๋ง๊ฒ ์กฐ์ ํ๋ ํ๋ก์ธ์ค์ ๋๋ค.
์ฃผ์ i18n/l10n ๊ณ ๋ ค ์ฌํญ:
- ํ ์คํธ ์ถ์ถ: ์ปดํฌ๋ํธ์์ ๋ชจ๋ ํ ์คํธ ๋ฌธ์์ด์ ๋ณ๋์ ์ธ์ด ํ์ผ๋ก ์ธ๋ถํํฉ๋๋ค.
- ๋ก์บ ๊ด๋ฆฌ: ๋ค์ํ ๋ก์บ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ๋ฉ์ปค๋์ฆ์ ๊ตฌํํฉ๋๋ค(์: `i18next`์ ๊ฐ์ ํ์งํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ).
- ๋ ์ง ๋ฐ ์ซ์ ํ์ ์ง์ : ๋ก์บ๋ณ ๋ ์ง ๋ฐ ์ซ์ ํ์ ์ง์ ์ ์ฌ์ฉํฉ๋๋ค.
- ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ(RTL) ์ง์: ์ปดํฌ๋ํธ๊ฐ ์๋์ด ๋ฐ ํ๋ธ๋ฆฌ์ด์ ๊ฐ์ RTL ์ธ์ด๋ฅผ ์ง์ํ๋์ง ํ์ธํฉ๋๋ค.
- ํตํ ํ์ ์ง์ : ์ฌ์ฉ์์ ๋ก์บ์ ์ ํฉํ ํ์์ผ๋ก ํตํ ๊ฐ์ ํ์ํฉ๋๋ค.
- ์ด๋ฏธ์ง ๋ฐ ์์ด์ฝ ํ์งํ: ์ ์ ํ ๊ฒฝ์ฐ ๋ก์บ๋ณ ์ด๋ฏธ์ง ๋ฐ ์์ด์ฝ์ ์ฌ์ฉํฉ๋๋ค.
์: ํ์งํ์ `i18next` ์ฌ์ฉ:
// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import fr from './locales/fr.json';
i18n
.use(initReactI18next)
.init({
resources: {
en: { translation: en },
fr: { translation: fr }
},
lng: 'en',
fallbackLng: 'en',
interpolation: {
escapeValue: false // react already safes from xss
}
});
export default i18n;
// Button.js
import { useTranslation } from 'react-i18next';
function Button() {
const { t } = useTranslation();
return (
);
}
export default Button;
// locales/en.json
{
"button.label": "Click me"
}
// locales/fr.json
{
"button.label": "Cliquez ici"
}
์ด ์์์๋ `i18next`๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๋์ JSON ํ์ผ์์ ๋ฒ์ญ์ ๋ก๋ํ๊ณ `useTranslation` ํ ์ ์ฌ์ฉํ์ฌ `Button` ์ปดํฌ๋ํธ ๋ด์์ ๋ฒ์ญ๋ ํ ์คํธ์ ์ก์ธ์คํฉ๋๋ค. ํ ์คํธ ๋ฌธ์์ด์ ์ธ๋ถํํ๊ณ ํ์งํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์ปดํฌ๋ํธ๋ฅผ ๋ค์ํ ์ธ์ด์ ์ฝ๊ฒ ์ ์ฉํ ์ ์์ต๋๋ค.
8. ์ปดํฌ๋ํธ ๋ฌธ์ํ
ํฌ๊ด์ ์ด๊ณ ์ฝ๊ฒ ์ก์ธ์คํ ์ ์๋ ๋ฌธ์๋ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ฑํ ๋ฐ ์ ์ง ๊ด๋ฆฌ์ ํ์์ ์ ๋๋ค. ๋ฌธ์์๋ ๋ค์์ด ํฌํจ๋์ด์ผ ํฉ๋๋ค.
- ์ฌ์ฉ ์์ : ๊ฐ ์ปดํฌ๋ํธ์ ๋ํ ๋ช ํํ๊ณ ๊ฐ๊ฒฐํ ์ฌ์ฉ ์์ ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์์ฑ ์ค๋ช : ์ ํ, ๊ธฐ๋ณธ๊ฐ ๋ฐ ์ค๋ช ์ ํฌํจํ์ฌ ๋ชจ๋ ์ปดํฌ๋ํธ ์์ฑ์ ๋ฌธ์ํํฉ๋๋ค.
- ์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ: ๊ฐ ์ปดํฌ๋ํธ์ ๋ํ ์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ์ ๊ฐ์กฐ ํ์ํฉ๋๋ค.
- ํ ๋ง ์ ๋ณด: ๊ฐ ์ปดํฌ๋ํธ๋ฅผ ํ ๋ง ๋ฐ ์ฌ์ฉ์ ์ ์ํ๋ ๋ฐฉ๋ฒ์ ์ค๋ช ํฉ๋๋ค.
- ์ฝ๋ ์ค๋ํซ: ์ฌ์ฉ์๊ฐ ํ๋ก์ ํธ์ ๋ณต์ฌํ์ฌ ๋ถ์ฌ๋ฃ์ ์ ์๋ ์ฝ๋ ์ค๋ํซ์ ํฌํจํฉ๋๋ค.
- ๋ํํ ๋ฐ๋ชจ: ์ฌ์ฉ์๊ฐ ๋ค์ํ ์ปดํฌ๋ํธ ๊ตฌ์ฑ์ ์คํํ ์ ์๋ ๋ํํ ๋ฐ๋ชจ๋ฅผ ์ ๊ณตํฉ๋๋ค.
Storybook ๋ฐ Docz์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝ๋์์ ์๋์ผ๋ก ์์ฑ๋๋ ๋ํํ ์ปดํฌ๋ํธ ๋ฌธ์๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ฌํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฒฉ๋ฆฌ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ๊ฐ๋ฐ์๊ฐ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ํ์ํ๊ณ ์ดํดํ ์ ์๋ ํ๋ซํผ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
9. ๋ฒ์ ๊ด๋ฆฌ ๋ฐ ๋ฆด๋ฆฌ์ค ๊ด๋ฆฌ
์ ์ ํ ๋ฒ์ ๊ด๋ฆฌ ๋ฐ ๋ฆด๋ฆฌ์ค ๊ด๋ฆฌ๋ ์์ ์ ์ด๊ณ ์ ๋ขฐํ ์ ์๋ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ์ง ๊ด๋ฆฌํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. SemVer(Semantic Versioning)๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๊ฒฝ ์ฌํญ์ ์ถ์ ํ๊ณ ์ ๋ฐ์ดํธ๋ฅผ ์ฌ์ฉ์์๊ฒ ์ ๋ฌํฉ๋๋ค. ๋ค์์ ํฌํจํ๋ ๋ช ํํ ๋ฆด๋ฆฌ์ค ํ๋ก์ธ์ค๋ฅผ ๋ฐ๋ฅด์ญ์์ค.
- ํ ์คํธ: ์ ๋ฒ์ ์ ๋ฆด๋ฆฌ์คํ๊ธฐ ์ ์ ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ์ ์ฒ ์ ํ ํ ์คํธํฉ๋๋ค.
- ๋ฌธ์ ์ ๋ฐ์ดํธ: ์ ๋ฒ์ ์ ๋ณ๊ฒฝ ์ฌํญ์ ๋ฐ์ํ๋๋ก ๋ฌธ์๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค.
- ๋ฆด๋ฆฌ์ค ์ ๋ณด: ์ ๋ฒ์ ์ ๋ณ๊ฒฝ ์ฌํญ์ ์ค๋ช ํ๋ ๋ช ํํ๊ณ ๊ฐ๊ฒฐํ ๋ฆด๋ฆฌ์ค ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ๋ ์ด์ ์ฌ์ฉ๋์ง ์๋ ์๋ฆผ: ๋ ์ด์ ์ฌ์ฉ๋์ง ์๋ ์ปดํฌ๋ํธ ๋๋ ๊ธฐ๋ฅ์ ๋ช ํํ๊ฒ ์ ๋ฌํฉ๋๋ค.
npm ๋ฐ Yarn๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด ํจํค์ง ์ข ์์ฑ์ ๊ด๋ฆฌํ๊ณ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ ๋ฒ์ ์ ๊ณต์ฉ ๋๋ ๊ฐ์ธ ๋ ์ง์คํธ๋ฆฌ์ ๊ฒ์ํ ์ ์์ต๋๋ค.
10. ๊ฑฐ๋ฒ๋์ค ๋ฐ ์ ์ง ๊ด๋ฆฌ
์ฑ๊ณต์ ์ธ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ ์ง์์ ์ธ ๊ฑฐ๋ฒ๋์ค ๋ฐ ์ ์ง ๊ด๋ฆฌ๊ฐ ํ์ํฉ๋๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ์ง ๊ด๋ฆฌ์ ๋ํ ์ญํ ๊ณผ ์ฑ ์์ ์ ์ํ๋ ๋ช ํํ ๊ฑฐ๋ฒ๋์ค ๋ชจ๋ธ์ ์ค์ ํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์์ด ํฌํจ๋ฉ๋๋ค.
- ์ปดํฌ๋ํธ ์์ ๊ถ: ๊ฐ๋ณ ์ปดํฌ๋ํธ์ ์์ ๊ถ์ ํน์ ํ ๋๋ ๊ฐ์ธ์๊ฒ ํ ๋นํฉ๋๋ค.
- ๊ธฐ์ฌ ์ง์นจ: ์ ์ปดํฌ๋ํธ๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ๊ธฐ์กด ์ปดํฌ๋ํธ๋ฅผ ์์ ํ๊ธฐ ์ํ ๋ช ํํ ๊ธฐ์ฌ ์ง์นจ์ ์ ์ํฉ๋๋ค.
- ์ฝ๋ ๊ฒํ ํ๋ก์ธ์ค: ์ฝ๋ ํ์ง ๋ฐ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ฝ๋ ๊ฒํ ํ๋ก์ธ์ค๋ฅผ ๊ตฌํํฉ๋๋ค.
- ์ ๊ธฐ ๊ฐ์ฌ: ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํ ์ ๊ธฐ ๊ฐ์ฌ๋ฅผ ์ํํ์ฌ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ํด๊ฒฐํฉ๋๋ค.
- ์ปค๋ฎค๋ํฐ ์ฐธ์ฌ: ํ์ ๋ฐ ํผ๋๋ฐฑ์ ์ฅ๋ คํ๊ธฐ ์ํด ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฃผ๋ณ์ ์ปค๋ฎค๋ํฐ๋ฅผ ์กฐ์ฑํฉ๋๋ค.
์ ๋ด ํ ๋๋ ๊ฐ์ธ์ด ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ์ง ๊ด๋ฆฌํ๊ณ ์ต์ ์ํ๋ก ์ ์งํ๋ฉฐ ์ก์ธ์ค ๊ฐ๋ฅํ๊ณ ์กฐ์ง์ ์ ๋ฐ์ ์ธ ๋์์ธ ๋ฐ ๊ธฐ์ ์ ๋ต์ ๋ถํฉํ๋๋ก ํด์ผ ํฉ๋๋ค.
๊ฒฐ๋ก
์ ์ค๊ณ๋ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ก ํธ์๋ ๋์์ธ ์์คํ ์ ๊ตฌ์ถํ๋ ๊ฒ์ ์ผ๊ด์ฑ, ํจ์จ์ฑ ๋ฐ ํ์ฅ์ฑ ์ธก๋ฉด์์ ์๋นํ ์์ต์ ์ฌ๋ฆด ์ ์๋ ์ค์ํ ํฌ์์ ๋๋ค. ์ด ๊ธ์ ์ค๋ช ๋ ์ํคํ ์ฒ ์์น์ ์ ์คํ๊ฒ ๊ณ ๋ คํ์ฌ ๋ค์ํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์์ฉํ๋ ๊ฐ๋ ฅํ๊ณ ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ๋ชจ๋ ์ฌ๋์ด ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์ ์๊ณ ๋ชจ๋ ํ๋ซํผ ๋ฐ ์ฅ์น์์ ๊ธ์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ธฐ์ฌํ ์ ์๋๋ก ์ ๊ทผ์ฑ, ๊ตญ์ ํ ๋ฐ ํฌ๊ด์ ์ธ ๋ฌธ์ํ์ ์ฐ์ ์์๋ฅผ ๋์ญ์์ค. ์งํํ๋ ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ์ฌ์ฉ์ ์๊ตฌ ์ฌํญ์ ๋ถํฉํ๋๋ก ๋์์ธ ์์คํ ์ ์ ๊ธฐ์ ์ผ๋ก ๊ฒํ ํ๊ณ ์ ๋ฐ์ดํธํ์ญ์์ค.
๋์์ธ ์์คํ ๊ตฌ์ถ ์ฌ์ ์ ๋ฐ๋ณต์ ์ธ ํ๋ก์ธ์ค์ด๋ฉฐ ์ง์์ ์ธ ๊ฐ์ ์ด ์ค์ํฉ๋๋ค. ํผ๋๋ฐฑ์ ์์ฉํ๊ณ ๋ณํํ๋ ์๊ตฌ ์ฌํญ์ ์ ์ํ๋ฉฐ ์กฐ์ง์ด ์ ์ธ๊ณ์ ์ผ๋ก ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์๋๋ก ์ง์ํ๋ ๋์์ธ ์์คํ ์ ๋ง๋ค๊ธฐ ์ํด ๋ ธ๋ ฅํ์ญ์์ค.